import React from 'react';
import classNames from 'classnames';
import * as icons from './icons';
import './Icon.less';

class Icon extends React.Component {
    displayName = 'Icon';

    static defaultProps = {
        color: 'currentColor',
        size: '24'
    }

    state = {
        icon: null,
        name: this.props.name
    }

    // async componentDidMount () {
    //     const {name} = this.props;
    //     try {
    //         const {default: icon} = await import(`./icons/${name}`);
    //         this.setState({
    //             icon,
    //             name
    //         });
    //     } catch (e) {
    //         // todo
    //     }
    // }

    // componentDidUpdate () {
    //     if (this.props.name !== this.state.name) {
    //         this.refreshIcon(this.props.name);
    //     }
    // }

    // async refreshIcon (name) {
    //     try {
    //         const {default: icon} = await import(`./icons/${name}`);
    //         this.setState({
    //             name,
    //             icon
    //         });
    //     } catch (e) {
    //         // todo
    //     }
    // }

    render () {
        const {className, children, name} = this.props;
        const clazzName = classNames(className, 'cm-icon', `cm-icon-${name}`);
        const props = Object.assign({}, this.props);
        delete props.className;
        let names = name.split('-');
        names = names.map(item => {
            return item.substr(0, 1).toUpperCase() + item.substr(1);
        });
        const iconName = names.join('');
        const IconComp = icons[iconName];
        
        if (IconComp) {
            return <IconComp className={clazzName} {...props}>{children}</IconComp>;
        } else {
            return null;
        }
    }
}

export default Icon;
